<template>
    <div style="width: 100%;">
        <div id="echartsbar" style="width:100%;height:180px"></div>
    </div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons");
export default {
    components: {},
    props: {},
    data() {
        return {
        };
    },
    watch: {},
    computed: {},
    mounted() { 
        this.inits()
    },
    methods: {
        //柱状图
        inits() {
            let mychart = this.$echarts.init(document.getElementById("echartsbar"));

            let option = {

                title: {
                    text: '',
                    textStyle: {
                        align: 'center',
                        color: '#fff',
                        fontSize: 20,
                    },
                    subtext: '好评率：100%',
                    top: '-4.5%',
                    left: '15%',
                    subtextStyle: {
                        color: "#fff"
                    }

                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '14%',
                    top: '19%',
                    containLabel: true
                },
                legend: {
                    // data: ['国办', '政务服务网', '线下'],
                    right: 10,
                    top: 0,
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                    // itemGap: 35
                },
                xAxis: {
                    type: 'category',
                    data: ['非常满意', '满意', '基本满意', '不满意', '非常不满意'],
                    axisLine: {
                        lineStyle: {
                            color: 'white'

                        }
                    },
                    axisLabel: {
                        // interval: 0,
                        // rotate: 40,
                        textStyle: {
                            fontFamily: 'Microsoft YaHei'
                        }
                    },
                },

                yAxis: {
                    type: 'value',
                    max: '20000',
                    name: '单位：个',
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.3)'
                        }
                    },
                    axisLabel: {}
                },

                series: [
                    {
                    name: '国办',
                    type: 'bar',
                    barWidth: '10%',
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fccb05'
                            }, {
                                offset: 1,
                                color: '#f5804d'
                            }]),
                            // barBorderRadius: 12,
                        },
                    },
                    data: [10011, 13, 0, 0, 0, 0, 0, 0, 0]
                },
                {
                    name: '政务服务网',
                    type: 'bar',
                    barWidth: '10%',
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#8bd46e'
                            }, {
                                offset: 1,
                                color: '#09bcb7'
                            }]),
                            // barBorderRadius: 11,
                        }

                    },
                    data: [17688, 89, 0, 0, 0, 0, 0, 0, 0]
                },
                {
                    name: '线下',
                    type: 'bar',
                    barWidth: '10%',
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#248ff7'
                            }, {
                                offset: 1,
                                color: '#6851f1'
                            }]),
                            // barBorderRadius: 11,
                        }
                    },
                    data: [2878, 2, 0, 0, 0, 0, 0, 0, 0]
                }
            ]
            };

            mychart.setOption(option)
        },
    },
    created() { },

};
</script>
<style lang="scss" scoped>
#echartsbar {
    margin-top: 2%
}
</style>